import 'package:day3pm/enlargeImage.dart';
import 'package:day3pm/imgBox.dart';
import 'package:flutter/material.dart';

class PhotosPage extends StatefulWidget {
  const PhotosPage({super.key});

  @override
  State<PhotosPage> createState() => _PhotosPageState();
}

class _PhotosPageState extends State<PhotosPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        margin: EdgeInsets.symmetric(horizontal: 20, vertical: 30),
        child: Column(
          children: [
            Container(
              child: Column(
                children: [
                  Container(
                    alignment: Alignment.centerLeft,
                    child: Column(
                      children: [
                        Container(
                          alignment: Alignment.topLeft,
                          child: const Text(
                            'Photos',
                            style: TextStyle(
                                fontSize: 24, fontWeight: FontWeight.w800),
                          ),
                        ),
                        Divider(
                          endIndent: 980,
                          thickness: 3.5,
                          color: Colors.pink[50],
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
                child: LayoutBuilder(builder: (BuildContext, BoxConstraints) {
              var BoxWidth = BoxConstraints.maxWidth; // 父控件的最大宽度
              var BoxHeight = BoxConstraints.maxHeight; // 父控件的最大高度

              var Width = BoxWidth / 2;
              var Height = BoxHeight / 2;

              var spacing = BoxHeight * 0.003;

              var hw = (Width - spacing) / 2 - spacing;

              return Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Container(
                    width: Width - spacing,
                    height: BoxHeight,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Container(
                          width: Width - spacing,
                          height: Width - spacing,
                          child: Wrap(
                            spacing: 2 * spacing,
                            runSpacing: 2 * spacing,
                            children: [
                              GestureImageBox(
                                  context: context,
                                  width: hw,
                                  height: hw,
                                  imgString: 'images/wsc2022se01.jpg'),
                              GestureImageBox(
                                  context: context,
                                  width: hw,
                                  height: hw,
                                  imgString: 'images/wsc2022se04.jpg'),
                              GestureImageBox(
                                  context: context,
                                  width: hw,
                                  height: hw,
                                  imgString: 'images/wsc2022se07.jpg'),
                              GestureImageBox(
                                  context: context,
                                  width: hw,
                                  height: hw,
                                  imgString: 'images/wsc2022se08.jpg'),
                            ],
                          ),
                        ),
                        Container(
                          width: Width - spacing,
                          height: BoxHeight - Width - spacing,
                          child: GestureImageBox(
                              context: context,
                              width: double.infinity,
                              height: double.infinity,
                              imgString: 'images/wsc2022se02.jpg'),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    width: Width - spacing,
                    height: BoxHeight,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Container(
                          width: Width - spacing,
                          height: Width - spacing,
                          child: GestureImageBox(
                              context: context,
                              width: double.infinity,
                              height: double.infinity,
                              imgString: 'images/wsc2022se03.jpg'),
                        ),
                        Container(
                          width: Width - spacing,
                          height: BoxHeight - Width - spacing,
                          child: Wrap(
                            spacing: 2 * spacing,
                            runSpacing: 2 * spacing,
                            children: [
                              GestureImageBox(
                                  context: context,
                                  width: hw,
                                  height: BoxHeight - Width - spacing,
                                  imgString: 'images/wsc2022se05.jpg'),
                              GestureImageBox(
                                  context: context,
                                  width: hw,
                                  height: BoxHeight - Width - spacing,
                                  imgString: 'images/wsc2022se02.jpg')
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              );
            }))
          ],
        ),
      ),
    );
  }
}

GestureDetector GestureImageBox({
  required BuildContext context,
  required double width,
  required double height,
  required String imgString,
}) {
  return GestureDetector(
    onTap: () {
      Navigator.push(context, MaterialPageRoute(builder: (context) {
        return EnlargeImageReturn(
          imgString: imgString,
        );
      }));
    },
    child: PhotosBox(width: width, height: height, imgString: imgString),
  );
}
